<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height: 150px"></div>
  </div>
</template>
<script>
// 1.引入饼图表构造函数
import { Bar } from "@antv/g2plot";
// 2.引入get方法 --->发送get请求
import { get } from "@/utils/request";
let moment = require("moment");
// 引入状态辅助函数
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 存放设备状态数量
      tempData: [],
      // 图表实例
      bar: null,
    };
  },
  computed: {
    // 映射公共数据
    ...mapState(["ed"]),
  },
  watch: {
    // 监听设备变化
    async ed() {
      let res = await get("/dashboard/pageQueryData", {
        page: 1,
        pageSize: 50,
        engineer_id: this.ed.engineer_id,
        device_id: this.ed.device_id,
      });
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format("HH:mm");
        arr[0].noise = 58.3;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.bar.changeData(this.tempData);
    },
  },
  methods: {
    async getTempData() {
      let res = await get("/dashboard/pageQueryData", {
        page: 1,
        pageSize: 100,
        engineer_id: 2,
        device_id: 1,
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format("HH:mm");
        arr[0].noise = 58.3;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      this.createstackedBarPlot();
      // console.log(res,'获取响应');
    },
    createstackedBarPlot() {
      const bar = new Bar(this.$refs.container, {
        data: this.tempData,
        xField: "noise",
        yField: "insert_time",
        seriesField: "insert_time",
        legend: {
          position: "top-left",
        },
      });

      bar.render();
      this.bar=bar
    },
  },
  // 生命周期 钩子函数  created ---组件实例创建完成
  // 生命周期 组件实例挂载完成 --获取dom节点
  // vue 11个生命周期  created mounted
  mounted() {
    this.getTempData();
    // this.loadCharts();
  },
};
</script>